<template>
  <div class="flow" ref="main" style="width: 100%;height:400px;" v-loading="loading"></div>
</template>

<script>
export default {
  props:{
    flowData:Object
  },
  name: "ChartTableFlow",
  data(){
    return{
      loading:false,
      // 时间
      timeList:[],
      // 数据
      dataList:[]
    }
  },
  methods:{
    // 展示图表
    showChart(){
      let myChart = this.$echarts.init(this.$refs.main);
      var colors = ["#5793f3", "#d14a61", "#675bba"];

      let option = {
        title: {
          text: "流量"
        },
        color: colors,

        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["今日流量变化趋势"]
        },
        grid: {
          top: 50,
          bottom: 50
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1]
              }
            },
            axisPointer: {
              label: {
                formatter: function(params) {
                  return (
                    "降水量  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                }
              }
            },
            data: this.timeList
          }],
        yAxis: [
          {
            name: this.flowData.sensorUnit,
            type: "value",
            axisLine: {
              onZero: false,
            },
          }
        ],
        series: [{
            name: "今日流量变化趋势",
            type: "line",
            smooth: true,
            data:this.dataList
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  mounted() {
    this.loading = true
    this.flowData.timeValueList.map(val => {
      this.dataList.push(val.value)
      this.timeList.push(val.time)
    })
    this.showChart()
    this.loading = false
  },
  watch:{
    deep:true,
    flowData:function(newValue,oldValue){
      this.loading = true
     this.newValue.timeValueList.map(val => {
       this.dataList.push(val.value)
       this.timeList.push(val.time)
     })
     this.showCharts()
     this.loading = false
    }
  },
};
</script>
<style scoped lang="less">
</style>
